/**
 * Created by chesw on 2017/5/11.
 * describe：我的预约
 */
var patientAppoint = Vue.extend({
    props: [],
    data: function () {
        return {
            remotely: 'remotely',
            lineDown: 'line-down',
            cancelBtn: 'cancel-btn',
            viewBtn: 'view-medical-records',
            tab: true,
            unfinished: [],
            already: []
        }
    },
    computed: {
      firstTab: function () {
          return this.tab ? 'active-tab' : 'inactive-tab'
      },
      secondTab: function () {
          return this.tab ? 'inactive-tab' : 'active-tab'
      },
      list: function () {
          return this.tab ? this.unfinished : this.already;
      }
    },
    created: function () {
        this.unfinished = [
            {
                date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '廖晓辉', type: {val: '远程', cls: true}, worker: '主任医师', department: '耳鼻喉科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '5000', btn: {val: '取消操作', cls: true}
            },
            {
                date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '陈军', type: {val: '线下', cls: false}, worker: '主任医师', department: '心脏科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '570', btn: {val: '取消操作', cls: true}
            },
            {   date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '刘德华', type: {val: '远程', cls: true}, worker: '主任医师', department: '骨科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '5900', btn: {val: '取消操作', cls: true}
            },
            {
                date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '张学友', type: {val: '线下', cls: false}, worker: '主任医师', department: '精神科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '400', btn: {val: '取消操作', cls: true}
            },
        ];
        this.already = [
            {
                date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '廖晓辉', type: {val: '远程', cls: true}, worker: '主任医师', department: '耳鼻喉科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '5000', btn: {val: '查看病历', cls: false}
            },
            {
                date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '陈军', type: {val: '线下', cls: false}, worker: '主任医师', department: '心脏科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '570', btn: {val: '查看病历', cls: false}
            },
            {   date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '刘德华', type: {val: '远程', cls: true}, worker: '主任医师', department: '骨科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '5900', btn: {val: '查看病历', cls: false}
            },
            {
                date : {date: '2015-10-10', time: '17:09-19:09'},
                expert: {name: '张学友', type: {val: '线下', cls: false}, worker: '主任医师', department: '精神科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '400', btn: {val: '查看病历', cls: false}
            },
            {
                date : {date: '2015-10-10', time: '11:09-19:09'},
                expert: {name: '张学友', type: {val: '远程', cls: true}, worker: '主任医师', department: '精神科'},
                address: {address: '上海市静安区乌鲁木齐中路12号', hospital: '复旦大学附属中山医院'},
                patient: '陈国清', fee: '400', btn: {val: '查看病历', cls: false}
            },
        ];
    },
    methods: {
        btn: function (p_type, p_index) {
            var _this = this;
            var param = {
                text: '该操作不可撤销，是否确认取消该订单',
                l_val: '是',
                r_val: '否',
                type: p_type,
                left_func: function () {
                    console.log(_this.$parent);
                    _this.$parent.confirm.type = false;
                    if(p_type) {
                        _this.unfinished.splice(p_index, 1);
                    }else{
                        _this.already.splice(p_index, 1);
                    }
                }
            };
            this.$emit('clickbtn', param);
        }
    },
    template: '<div class="patient-appoint">' +
    '<div class="visit-tab">' +
        '<div class="visit-tab-btn" :class="firstTab" @click="tab = true">未就诊</div>' +
        '<div class="visit-tab-btn" :class="secondTab" @click="tab = false">已就诊</div>' +
    '</div>' +
    '<div class="table table-title flex">' +
        '<div class="first-column">就诊时间</div>' +
        '<div class="second-column">预约专家</div>' +
        '<div class="third-column">就诊地点</div>' +
        '<div class="fourth-column">就诊人</div>' +
        '<div class="fifth-column">就诊费用</div>' +
        '<div class="sixth-column">操作</div>' +
    '</div>' +
    '<div class="table table-row flex" v-for="(item, index) in list">' +
        '<div class="first-column date">' +
            '<p>{{item.date.date}}</p>' +
            '<p>{{item.date.time}}</p>' +
        '</div>' +
        '<div class="second-column expert">' +
            '<p>{{item.expert.name}} &nbsp;&nbsp;' +
                '<span class="visit-type" :class="[item.expert.type.cls ? remotely : lineDown]">{{item.expert.type.val}}</span>' +
            '</p>' +
            '<p>[{{item.expert.department}}-{{item.expert.worker}}]</p>' +
        '</div>' +
        '<div class="third-column address">' +
            '<p>{{item.address.hospital}}</p>' +
            '<p>{{item.address.address}}</p>' +
        '</div>' +
        '<div class="fourth-column patient-name">{{item.patient}}</div>' +
        '<div class="fifth-column fee">{{item.fee}}元</div>' +
        '<div class="sixth-column operate">' +
            '<p :class="[item.btn.cls ? cancelBtn : viewBtn]" @click="btn(item.btn.cls, index)">{{item.btn.val}}</p>' +
        '</div>' +
    '</div>' +
    '<div class="result-empty">暂无数据</div>'+
    '</div>'
});
